<template>
  <!-- 判断手机屏幕尺寸 小于950的均跳转到手机端 -->
  <div class="bty-layout">
    <!-- 头部 start -->
    <div class="bty-header">
      <div class="bt-container">
        <div class="bt-item item1"></div>
        <div class="bt-item item2" style="background-color: #008CA0;">
          <div style="height: 5.5rem; width: 13rem;">
            <img src="/src/assets/logo_bk.png" alt="" style="height: 100%;">
          </div>
          <!-- 分两行 -->
          <div style="height: 4rem; width: 45rem;">
            <div style="height: 2rem; width: 45rem; line-height: 1.5rem;">
              <div style="display: inline-block; width: 14rem; height: 1.5rem; line-height: 1.5rem;">
                <span>选择语言：</span>
                <span style="margin-right: 5px;" class="bty-mouse-on">中文</span>|
                <span  class="bty-mouse-on"  @click="()=>router.push({path: '/en/home'})">英文</span>
              </div>
              <div style="display: inline-block; width: 14rem; height: 1.5rem; line-height: 1.5rem;">
                <span @click="() => router.push({ path: '/shop' })" style="margin-right: 5px;"  class="bty-mouse-on">快速订购</span>|
                <span @click="() => router.push({ path: '/about' })"  class="bty-mouse-on">联系我们</span>
              </div>
              <div @mouseenter="showQrCode = true" @mouseleave="showQrCode = false" style="display: inline-block;">
                <div style="height: 1.5rem; line-height: 1.5rem; display: inline-block;">
                  <img src="@/assets/WeChat-2.png" alt=""
                    style="height: 1rem; vertical-align:middle; margin-right: 10px;">
                </div>
                <span>微信在线联系咨询</span>
                <transition name="el-zoom-in-top">
                  <div v-if="showQrCode" style="position: fixed; top: 0;">
                    <img src="@/assets/wendy.png" style="width: 10rem;"></img>
                  </div>
                </transition>
              </div>
            </div>
            <div style="height: 2rem; width: 45rem; line-height: 1.5rem;">
              <div style="display: inline-block; height: 1.5rem; line-height: 1.5rem;">
                <span style="display: inline-block; width: 14rem;" >订货电话：{{ company.sel_tel }}</span>
                <span style="display: inline-block; width: 14rem;" >订货邮件：{{ company.email }}</span>
                <span style="display: inline-block; width: 14rem;">工作时间：{{ company.work_time }}</span>
              </div>
            </div>
          </div>
          <div style="height: 5.5rem; width: 3rem; line-height: 5.5rem;">
            公众号
          </div>
          <div style="height: 5rem; width: 5rem;">
            <img src="/src/assets/gongzong.png" alt="" style="height: 100%;">
          </div>
        </div>
        <div class="bt-item item3"></div>
      </div>
    </div>
    <!-- 头部 end -->
    <div class="login-wrapper">
      <div class="login-inner">
        <div v-if="userInfo.username">
          <span style="margin-right: 40px;">您好，<span @click="personalCenter" class="user-center">{{ userInfo.username
              }}</span>
            欢迎您来到罗比生物</span>
          <span @click="personalCenter" style="cursor: pointer; padding-left: 10px;">个人中心</span>
          <span @click="orderCenter" style="cursor: pointer; padding-left: 10px;">订单</span>
          <span @click="shopCenter" style="cursor: pointer; padding-left: 10px;">购物车</span>
          <span @click="loginOut" style="cursor: pointer; padding-left: 10px;">退出登录</span>
        </div>
        <div v-else>
          <span style="cursor: pointer; padding-right: 5px; border-right: 1px solid #fff;"
            @click="() => router.push({ path: '/login' })">登录</span>
          <span style="cursor: pointer; padding-left: 5px;" @click="() => router.push({ path: '/register' })">注册</span>
        </div>
      </div>
    </div>
    <!-- 主体部分 -->
    <div class="bty-main-wrapper">
      <!-- 目录 start -->
      <div class="bty-main-menu">
        <div class="bty-main-menu-container">
          <div class="bty-main-menu-wrapper ruby-inline-block">
            <span @click="() => router.push({ path: '/btyindex' })" style="border: none;">首页</span>
            <!-- <span @click="() => router.push({ path: '/product' })">全部产品</span> -->
            <span @click="openInNewTab('product')">全部产品</span>
            <span @click="openInNewTab('technology')">技术服务</span>
            <span @click="openInNewTab('shop')">订购中心</span>
            <span @click="openInNewTab('question')">技术咨询</span>
            <span @click="openInNewTab('promotion')">促销活动</span>
            <span @click="openInNewTab('about')">关于我们</span>
          </div>
          <div class="bty-main-search ruby-inline-block">
            <el-input v-model="searchContent" class="custom-input"
              @keydown.enter="() => router.push({ path: '/search', name: 'search', query: { content: searchContent } })">
              <template #append>
                <div style="color: #fff;"
                  @click="() => router.push({ path: '/search', name: 'search', query: { content: searchContent } })"
                  @keydown.enter="() => router.push({ path: '/search', name: 'search', query: { content: searchContent } })">
                  搜索
                </div>
              </template>
            </el-input>
          </div>
        </div>
      </div>
      <!-- 目录 end -->
      <!-- 主体  --start -->
      <div class="bty-main-container">
        <div class="bty-main-aside">
          <div class="bty-main-aside-wrapper">
            <div @mouseleave="leaveMainAside()">
              <div class="bty-main-aside-tabs">
                <div v-for="item in firstCategoryData" key="item.id" class="tab" @mouseenter="enterAsideTab(item.id)"
                  style="line-height: 40px;"><span style="font-size: 1rem;">{{ item.title }}</span></div>
              </div>
              <div class="bty-main-aside-contain" v-if="isShowAsideContain">
                <div class="bty-main-aside-contain-wrapper">
                  <div v-for="item in firstCategoryData" key="item.id">
                    <div class="bty-main-aside-tabs-content" v-if="activateIndex === item.id">
                      <div>
                        <div v-for="sitem in item.second">
                          <div class="tabs-content-wrapper" v-if="sitem.product.length !== 0"
                            style="text-align: left; margin-top: 10px;">
                            <span @click="forProductList(sitem.id)">{{ sitem.title }}</span>
                          </div>
                          <div style="font-size: 15px; line-height: 12px; text-align: left;">
                            <el-row>
                              <el-col :span="4" v-for="(pitem, index) in sitem.product" :key="index" style="margin: 8px;">
                                <el-text class="w-150px mb-2 for-point" truncated @click="openProductInNewTab(pitem.id)">
                                  {{ pitem.title }}
                                </el-text>
                                <!-- <el-tooltip
                                  class="box-item"
                                  effect="light"
                                  :enterable="false"
                                  :content="pitem.title"
                                  placement="top-start"
                                  >

                              </el-tooltip> -->
                                <!-- <span @click="openProductInNewTab(pitem.id)">{{ pitem.title }}</span> -->
                              </el-col>
                            </el-row>
                            <!-- <div
                              :class="index === sitem.product.length - 1 ? 'tabs-content-wrapper-detail-last' : 'tabs-content-wrapper-detail'"
                              v-for="(pitem, index) in sitem.product" :key="index">
                              <span @click="openProductInNewTab(pitem.id)">{{ pitem.title }}</span>
                            </div> -->
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 产品列表  -- end -->
            <!-- 竖轮播图  start -->
            <div class="bty-play-img-line">
              <div class="block text-center" m="t-4" style="width: 210px; position: absolute;">
                <el-carousel trigger="click" height="510px" indicator-position="none">
                  <el-carousel-item v-for="(item, index) in lunBoData" :key="index">
                    <img :src="item.cover" alt="" style="height: 100%;" @click="linkLunBoDetail(item)">
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
            <!-- 竖轮播图  end -->
          </div>
        </div>
        <!-- 右边列 -->
        <div class="bty-main-inner">
          <el-main class="main" style="padding: 0;">
            <section>
              <router-view v-slot="{ Component }">
                <transition name="slide-fade" mode="out-in">
                  <div :key="route.path">
                    <component :is="Component"></component>
                  </div>
                </transition>
              </router-view>
            </section>
          </el-main>
        </div>
      </div>
    </div>
    <div>
      <div style="background-color: #008CA0; position: fixed; bottom: 0; width: 100%; z-index: 1000;">
        <div style="display: flex; justify-content: center;">
          <div style="width: 980px;text-align: center; font-size: 0.9rem;">
            <div style="margin-top: 10px; margin-bottom: 10px;">
              {{ company.web }}
            </div>
            <div style="margin-bottom: 15px;">{{ company.address }}</div>
          </div>  
        </div>
        </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { getUserInfo, btyIndexCagetory, suLunboList, getCompanyInfo } from "../requests/index";
import { ElMessage } from 'element-plus';
import { btyStore } from '@/stores/bty';

const router = useRouter();
const route = useRoute();
const lunBoData = ref();
const suLunBoData = ref();
const isShowAsideContain = ref(false);
const showQrCode = ref(false);
const searchContent = ref();
const activateIndex = ref(0);
const userInfo = reactive({
  "username": "",
  "is_superuser": null,
  "id": null
});

const initStore = btyStore();

const openInNewTab = (title)=>{
  const route = router.resolve({name: title});
  window.open(route.href, "_blank");
};

// 跳转到详情
const forProductDetail = (id) => {
  router.push({ path: "/detail", query: { "id": id } });
  isShowAsideContain.value = false;
}
const openProductInNewTab = (id)=>{
  const route = router.resolve({name: "detail", query: {'id': id}});
  isShowAsideContain.value = false;
  window.open(route.href, "_blank");
};
watch(() => searchContent.value, (newValue, oldValue) => {
  console.log(` new ${newValue}  ${oldValue}`);
  initStore.udpateSearch(newValue)
})
initStore.udpateSearch(searchContent)
const forUserInfo = async () => {
  if (window.localStorage.getItem("token")) {
    const res = await getUserInfo();
    if (res.status === 2000) {
      const data = res.data;
      userInfo.username = data.username;
      userInfo.is_superuser = data.is_superuser;
      userInfo.id = data.id;
    } else {
      console.log("用户未登录")
    }
  }
};
forUserInfo();
// 移动鼠标到目录
const enterAsideTab = (index) => {
  isShowAsideContain.value = true;
  activateIndex.value = index;
}
const leaveMainAside = () => {
  isShowAsideContain.value = false;
}
const forProduct = () => {
  router.push({ path: '/category' });
  isShowAsideContain.value = false;
}
// 退出登录
const loginOut = () => {
  window.localStorage.removeItem("token");
  window.localStorage.removeItem("username");
  router.push({ path: '/btyindex' });
  window.location.reload();
}
// 个人中心
const personalCenter = () => {
  if (userInfo.username === 'admin') {
    router.push({ path: "/admin/order" })
  } else {
    router.push({ path: "/user" });
  }
};
// 订单
const orderCenter = () => {
  if (userInfo.username === 'admin') {
    router.push({ path: "/admin/order" })
  } else {
    router.push({ path: "/shopCenter" });
  }
};
// 购物车
const shopCenter = () => {
  if (userInfo.username === 'admin') {
    router.push({ path: "/admin/order" })
  } else {
    router.push({ path: "/car" });
  }
}
// 渲染页面数据
// 获取一级分类列表
const firstCategoryData = ref({});
const getFirstCategory = async () => {
  const res = await btyIndexCagetory();
  if (res.status === 2000) {
    firstCategoryData.value = res.data;
  } else {
    ElMessage.error("获取一级分类列表失败")
  }
};
getFirstCategory();
// 跳转二级产品列表
const forProductList = (id) => {
  router.push({ path: "/category", query: { "id": id } });
  isShowAsideContain.value = false;
}

// 轮播
const getLunBoData = async () => {
  const res = await suLunboList();
  if (res.status === 2000) {
    lunBoData.value = res.data;
  } else {
    console.log("轮播失败")
  }
};
onBeforeMount(() => {
  getLunBoData();
  forCompanyInfo();
})


// 轮播图点击跳转
const linkLunBoDetail = (item) => {
  const cg = item.cg;
  const detail_id = item.detail_id;
  if (cg === 1) {
    // 跳转到产品详情
    router.push({ path: "/detail", query: { 'id': detail_id } })
  } else if (cg === 2) {
    // 跳转到技术服务详情
    router.push({ path: "/technology", query: { 'id': detail_id } })
  } else if (cg === 3) {
    // 跳转到公司新闻详情
    router.push({ path: "/news", query: { 'id': detail_id } })
  } else if (cg === 4) {
    // 跳转到促销活动详情
    router.push({ path: "/promotion_detail", query: { 'id': detail_id } })
  }
};
const company = ref({
  sel_tel: "",
  tech_tel: "",
  work_time: "",
  email: "",
  address: "",
  web: "",
  content: "",
});
const forCompanyInfo = async () => {
  const res = await getCompanyInfo();
  if (res.status === 2000) {
    company.value = res.data;
  };
};

</script>
<style scoped>
/* 头部  -- start */
.bty-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.user-center {
  cursor: pointer;
  font-size: 17px;
}

.user-center:hover {
  color: #f38181;
}

.login-wrapper {
  margin-top: 100px;
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: center;
  color: #1D8BA1;
}

.login-inner {
  width: 985px;
  text-align: right;
}

.bty-mouse-on{
  cursor: pointer;
}
.bty-mouse-on:hover{
  color: #bf471f;
}
/* 头部  -- end */


/* 目录 -- start */
.bty-main-menu {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bty-main-menu-container {
  width: 985px;
}

.bty-main-menu-wrapper {
  margin-right: 50px;
}

.bty-main-menu-wrapper>span {
  cursor: pointer;
  display: inline-block;
  padding: 0 5px 0 5px;
  font-size: 16px;
  color: #1E8BA1;
  border-left: 1px solid #1E8BA1;
}

.bty-main-search {
  width: 300px;
  margin-left: 10px;
  float: right;
  /* padding-right: 30px */
}

:deep(.el-input__wrapper) {
  height: 25px;
  padding: 0;
  border-radius: 0;
}

:deep(.el-input__inner) {
  height: 23px;
  padding: 0;
  color: #333;
  line-height: 23px;
  border-radius: 0;
  border-left: 1px solid #1E8BA1;
  border-top: 1px solid #1E8BA1;
  border-bottom: 1px solid #1E8BA1;
}

:deep(.el-input-group__append) {
  height: 25px;
  line-height: 25px;
  background-color: #1E8BA1;
  color: white;
  font-size: 13px;
  border-radius: 0;
}

/* 目录  -- end */
/* 主体  --start */
.bty-main-wrapper{
  margin-bottom: 150px;
}

.bty-main-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.bty-main-aside {
  width: 210px;
  text-align: center;
  color: #fff;
}

.bty-main-aside-tabs {
  background-color: #1E8BA1;
}

.bty-main-aside-tabs {
  width: 210px;
  height: 380px;
  padding-top: 12px;
}

.bty-main-aside-tabs>div {
  font-size: 14px;
  line-height: 35px;
}

.bty-main-aside-tabs>div:hover {
  background-color: #267CD6;
  text-align: center;
  background-color: #fff;
  color: #333;
}

/* 产品内容 --start */
.bty-main-aside-contain {
  width: 775px;
  position: absolute;
  top: 205px;
  margin-left: 210px;
  z-index: 80;
  opacity: 0.9;
}

.bty-main-aside-contain-wrapper {
  min-height: 392px;
  background-color: #C8DCED;
}

.bty-main-aside-tabs-content {
  padding: 10px;
}


.tabs-content-wrapper {
  color: #06488C;
  font-weight: bolder;
  font-size: 15px;
  margin-left: 10px;
  cursor: pointer;
}

.tabs-content-wrapper-detail {
  display: inline-block;
  margin-left: 5px;
  margin-top: 10px;
  /* border-right: 2px solid #333; */
}

.tabs-content-wrapper-detail-last {
  display: inline-block;
  margin-left: 5px;
  margin-top: 10px;
}

.tabs-content-wrapper-detail-no {
  display: inline-block;
  /* border-right: 2px solid #333; */
}


.tabs-content-wrapper-detail span {
  display: inline-block;
  padding-left: 5px;
  padding-right: 10px;
  color: #333;
  cursor: pointer;
}

.tabs-content-wrapper-detail-last span {
  display: inline-block;
  padding-left: 5px;
  padding-right: 10px;
  color: #333;
  cursor: pointer;
}

.tabs-content-wrapper-detail-last span:hover {
  color: red;
}

.tabs-content-wrapper-detail span:hover {
  color: red;
}

/* 产品内容 --end */


/* 目录 -- end */
/* 竖轮播图 -- start */
.bty-play-img-line {
  margin-top: 20px;
  width: 210px;
  height: 500px;
}

.bty-main-inner {
  margin-left: 20px;
  width: 755px;
}

/* 底部 -- start */
.bty-footer {
  margin-top: 5px;
}

.bty-footer-contract {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.bty-footer-contract-wrapper {
  width: 985px;
  height: 125px;
}

.bty-footer-img-left {
  width: 212px;
  display: inline-block;
}

.bty-footer-img-left img {
  width: 100%;
}

.bty-footer-center {
  display: inline-block;
  width: 561px;
}


.bty-footer-img-right {
  display: inline-block;
  width: 212px;
}

.bty-footer-menu {
  width: 985px;
  background-color: #E9EEF3;
}

.bty-footer-detail {
  margin-top: 10px;
  line-height: 20px;
  font-size: 14px;
  font-weight: 400;
}

.bty-footer-detail div {
  cursor: pointer;
}

.bty-footer-detail div:hover {
  color: #267CD6;
}

/* 底部 -- end */

/* 主要内容动画  --start */
.slide-fade-enter-active {
  transition: all 0.8s ease-in-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.3, 0.6, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  /* transform: translateX(-10px); */
  opacity: 0.5;
}

/* 主要内容动画  --start */


.bt-container {
  display: grid;
  grid-template-columns: 1fr 66rem 1fr;
  grid-template-rows: 5.5rem;
  gap: 1rem;
  font-size: 0.9rem;
  background-color: #008CA0;
}

.bt-item {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bt-container-slice-two {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 100px;
  gap: 10px
}

.bt-item-slice-two {
  background-color: rgb(61, 50, 176);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.for-point{
  cursor: pointer;
}
</style>